<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.purchaseOrderCode" placeholder="ERP子订单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.purchaseCode" placeholder="采购订单" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                style="width: 100%;"
                clearable
                placeholder="状态"
                v-model="queryParams.status"
            >
              <template v-for="(item,index) in erp_receipt_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                style="width: 100%;"
                clearable
                placeholder="订单类型"
                v-model="queryParams.receiptType"
            >
              <template v-for="(item,index) in erp_receipt_type" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item  prop="warehouseId">
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="所属仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.locationCode" placeholder="库位" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.barcode" placeholder="商品条码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.vendorName" placeholder="供应商名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.waybillName" placeholder="快递名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.waybillCode" placeholder="运单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.receiptByName" placeholder="收货人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.putawayByName" placeholder="上架人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="receiptTimeData"
                start-placeholder="收货时间"
                end-placeholder="收货时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="putawayTimeData"
                start-placeholder="上架时间"
                end-placeholder="上架时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <div>
      <el-button type="primary">导出</el-button>
    </div>
    <vxe-table
        border
        show-overflow
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="purchaseOrderCode" width="180" title="ERP子订单号"></vxe-column>
      <vxe-column field="purchaseCode" width="180" title="采购订单"></vxe-column>
      <vxe-column field="status" width="80" title="状态">
        <template v-slot="{row}">
          {{ returnDictLabel(erp_receipt_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="receiptType" width="150" title="订单类型">
        <template v-slot="{row}">
          {{ returnDictLabel(erp_receipt_type, row.receiptType) }}
        </template>
      </vxe-column>
      <vxe-column field="skuCode" width="180" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
      <vxe-column field="coverUrl"  width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
        </template>
      </vxe-column>
<!--      <vxe-column field="barcode" width="120" title="商品条码"></vxe-column>-->
      <vxe-column field="qcPassNum" width="80" title="数量"></vxe-column>
      <vxe-column field="vendorName" width="100" title="供应商名称"></vxe-column>
      <vxe-column field="waybillName" width="100" title="快递名称"></vxe-column>
      <vxe-column field="waybillCode" width="120" title="运单号"></vxe-column>
      <vxe-column field="locationCode" width="150" title="库位"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库"></vxe-column>
      <vxe-column field="areaName" width="100" title="库区"></vxe-column>
      <vxe-column field="receiptByName" width="100" title="收货人"></vxe-column>
      <vxe-column field="receiptTime" width="180" title="收货时间"></vxe-column>
      <vxe-column field="putawayByName" width="100" title="上架人"></vxe-column>
      <vxe-column field="putawayTime" width="180" title="上架时间"></vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>

</template>

<script setup>
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";
import {getErpReceiptHistoryList, warehouseGetFilter} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const {proxy} = getCurrentInstance()
const {erp_receipt_status, erp_receipt_type} = proxy.useDict("erp_receipt_status", "erp_receipt_type");

let receiptTimeData = ref([])//收货时间
let putawayTimeData = ref([])//上架时间
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
let total = ref(0)
let loading=ref(false)
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 400;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 400;
}

let tableList = ref([])

function getList() {
  loading.value=true
  queryParams.value.receiptStartTime=receiptTimeData.value[0] //收货时间
  queryParams.value.receiptEndTime=receiptTimeData.value[1]
  queryParams.value.putawayStartTime=putawayTimeData.value[0] //上架时间
  queryParams.value.putawayEndTime=putawayTimeData.value[1]
  let params={
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getErpReceiptHistoryList(params).then(res=>{
    if(res.code===200){
      tableList.value = res.data
      total.value =res.total
    }
  }).finally(()=>{
    loading.value =false
  })
}

const resetQuery = () => {
  receiptTimeData.value=[]
  putawayTimeData.value =[]
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

let warehouseList = ref([])
function getWarehouseFilter() {
  warehouseGetFilter({
    status: 0
  }).then(res => {
    if (res.code === 200) {
      warehouseList.value = res.data.map(item => {
        item.value = item.warehouseId
        item.label = item.warehouseName
        return item
      })

    }
  })
}

onMounted(()=>{
  getWarehouseFilter()
  getList()
})

</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
</style>